<template>
  <!-- 促销策略建档 -->
  <div class="global-topList">
    <div class="top_wrap pt-16 pb-16 borderB-2">
      <span class="mr-8">促销品牌</span>
      <el-select
        class="update-el-select"
        v-model="params.brandedName"
        placeholder="请选择"
        @change="onBrandChange"
        clearable
        @clear="getPromotionlList"
      >
        <el-option
          v-for="item in brandList"
          :key="item.id"
          :label="item.name"
          :value="
            item.name +
            ',' +
            item.id +
            ',' +
            item.softwareCustomerId +
            ',' +
            item.status +
            ',' +
            item.discount
          "
        >
        </el-option>
      </el-select>
      <span class="mr-8 pl-26">促销款号</span>
      <el-input
        v-model="params.styleNumber"
        class="update-input"
        @input="inputStyleNumber"
      ></el-input>
      <!-- <el-select
        v-model="params.styleNumber"
        placeholder="请选择"
        @change="onChange"
      >
        <el-option
          v-for="item in styleNumber"
          :key="item.id"
          :label="item.phone"
          :value="item"
        >
        </el-option>
      </el-select> -->
      <span class="mr-8 pl-26">折数</span>
      <el-input
        type="number"
        v-model.number="params.discount"
        class="update-input"
      ></el-input>
      <span class="mr-8 pl-26">日期</span>

      <!-- value-format="yyyy-MM-dd" -->
      <el-date-picker
        class="update-el-datetimerange"
        v-model="dateTime"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        @change="onDateChange"
      >
      </el-date-picker>
      <span class="mr-8 pl-26">备注</span>
      <el-input
        class="update-input"
        v-model="params.remark"
        @input="inputRemark"
      ></el-input>
    </div>
    <div class="bottom_wrap pt-16">
      <el-button type="primary" icon="el-icon-search" @click="onSearch"
        >查询</el-button
      >
      <el-button icon="el-icon-folder-checked" @click="onSave">保存</el-button>
      <el-button icon="el-icon-delete" @click="handleDelete">删除</el-button>
      <div class="table_wrap pt-16">
        <el-table
          :data="promotionlList"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
          highlight-current-row
          border
          @cell-click="hanldeRowClick"
          height="68vh"
        >
          <el-table-column prop="startTime" label="开始日期" width="180">
          </el-table-column>
          <el-table-column prop="endTime" label="截止日期" width="180">
          </el-table-column>
          <el-table-column prop="brandedName" label="促销品牌">
          </el-table-column>
          <el-table-column prop="styleNumber" label="促销款号">
          </el-table-column>
          <el-table-column prop="discount" label="折数"> </el-table-column>
          <el-table-column prop="remark" label="备注"> </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        style="width: 100%"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 获取品牌列表
import { getBrandDataApi } from '@/request/inventory/inventory_statement'
import {
  getPromotionlList,
  getStyleNumberDiscountList,
  addPromotionInsert,
  deletePromotion
} from '@/request/store/K_SalesPromotion'
export default {
  name: 'K_SalesPromotion',
  data() {
    return {
      // 请求头
      params: {
        brandedName: '',
        directSaleNo: '',
        discount: null,
        id: 0,
        remark: '',
        softwareCustomerId: 0,
        status: 0,
        styleNumber: '',
        limit: 10,
        page: 1
      },
      // 品牌选择
      brandValue: '',
      // 促销数据
      promotionlList: [],
      styleNumber: [],
      brandList: [],
      vipCustomerList: [],
      dateTime: '',
      rowId: null,
      brandedName: '',
      total: 0
    }
  },
  created() {
    this.params.directSaleNo = localStorage.getItem('sdNo') || null
    this.getBrandDataApi()
    this.getPromotionlList()
  },
  methods: {
    // 查询所有促销策略
    async getPromotionlList(params) {
      const { data } = await getPromotionlList(params)
      if (data && data.code === 200) {
        this.total = data.total
        // console.log(this.total)
        this.promotionlList = data.data
      }
      // console.log(data.data)
    },
    // 销售品牌
    async getBrandDataApi() {
      const { data } = await getBrandDataApi()
      if (data && data.code === 200) {
        this.brandList = data.data
      }
    },
    // 保存
    async onSave() {
      // console.log(this.params)
      const { data } = await addPromotionInsert(this.params)
      if (data && data.code === 200) {
        // console.log(data)
        this.getPromotionlList()
      }
    },
    // 查询
    async onSearch() {
      const { data } = await getPromotionlList(this.params)
      if (data && data.code === 200) {
        this.promotionlList = data.data
      }
    },
    onBrandChange(e) {
      this.params.brandedName = e.split(',')[0]
      this.params.id = e.split(',')[1]
      this.params.softwareCustomerId = e.split(',')[2]
      this.params.status = e.split(',')[3]
      // this.params.discount = e.split(',')[4]
    },
    // 时间选择
    onDateChange(date) {
      // if (!date) return
      let startTime = (date && `${date[0]} 00:00:00`) || ''
      let endTime = (date && `${date[1]} 23:59:59`) || ''
      this.params.startTime = startTime
      this.params.endTime = endTime
    },
    hanldeRowClick(row) {
      this.rowId = row.id
    },
    // 删除
    handleDelete(id) {
      if (!this.rowId) return this.$message.error('请选择要删除的数据')
      this.$confirm('此操作将永久删除改数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data } = await deletePromotion(this.rowId)
          if (data && data.code === 200) {
            this.$message.success(data.msg)
            this.getPromotionlList()
            this.rowId = null
          } else {
            this.$message.error(data.msg)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleSizeChange(val) {
      this.params.limit = val
      this.getPromotionlList(this.params)
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getPromotionlList(this.params)
    },
    inputStyleNumber(val) {
      this.params.styleNumber = val.toUpperCase()
    },
    inputRemark(val) {
      this.params.remark = val.toUpperCase()
    }
  }
}
</script>

<style lang="less" scoped>
.pagination {
  margin-top: 10px;
  text-align: right;
  /deep/.el-input--suffix {
    .el-input__inner {
      width: 100px;
    }
  }
}
</style>
